<script lang="ts" module>
    export const AccordionContextKey = Symbol("AccordionContextKey");
</script>

<script lang="ts">
    import { setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { AccordionProps } from "./Accordion";

    let { multi, flex, onselect, activeKey = $bindable(multi ? [] : ""), ...props }: AccordionProps = $props();

    const classList = $derived(
        useClassList(props, "cm-accordion", {
            "cm-flex-accordion": flex,
        }),
    );

    const onTitleSelect = ({ name, open, openKeys }: any) => {
        activeKey = openKeys;
        onselect?.({ name, open, openKeys });
    };
    const ctx = { flex: flex, multi: multi, getActiveKey: () => activeKey, onSelect: onTitleSelect };
    setContext(AccordionContextKey, ctx);
</script>

<div class={classList} {...props}>
    {@render props.children?.()}
</div>
